import apiTool, {
  getSize,
  getUserInfoUrl,
  getUserTypeValue,
  phoneClick,
} from "@/command/apiTool";
import { defineComponent, reactive } from "vue";
import PageTitle from "@/components/PageTitle";
import PageImgTitle from "@/components/PageImgTitle";
// import { useRequest } from "./request";
import CardView from "@/components/CardView";
import ListView from "@/components/ListView";
import IconText from "@/components/IconText";
import FilterMenu from "@/components/FilterMenu";
import {
  IFilterMenuChoose,
  IFilterMenuPropsData,
  filterMenuProps,
} from "@/components/FilterMenu/types";
import TextGroups from "@/components/TextGroups";
import { DropdownItem, DropdownMenu } from "vant";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import Search from "@/components/Search";
import GreyBlock from "@/components/GreyBlock";
import RoundInfo from "@/components/RoundInfo";
import Text from "@/components/Text";
import TextView from "@/components/TextView";
import RowView from "@/components/RowView";
import { Divider } from "vant";
import RoundEdgeButtonGroup from "@/components/RoundEdgeButtonGroup";
import { ITextGroupPropsData } from "@/components/TextGroups/types";
import FilterMenuSearch from "@/components/FilterMenuSearch";
export default defineComponent({
  setup(props, {}) {
    const menuList: IFilterMenuChoose[] = [
      {
        type: "area",
        key: "areaCode",
      },
      {
        type: "productType",
        key: "categoryId",
        title: "农产品",
      },
      {
        type: "datePicker",
        key: "time",
      },
    ];
    const form = reactive({});
    const renderItem = (e: any) => {
      const buttons: IButtonGroupViewData[] = [
        {
          text: "联系小户",
          type: "primary",
          plain: true,
          onClick: () => {
            phoneClick(e.phone);
          },
        },
      ];
      const buttons2: IButtonGroupViewData[] = [
        {
          text: "联系大户",
          type: "primary",
          plain: true,
          onClick: () => {
            phoneClick(e.phone);
          },
        },
        // {
        //   text: "查看结果",
        //   type: "primary",
        //   color: "linear-gradient(90deg, #1989FA 0%, #73B9FF 100%)",
        // },
      ];
      const data: ITextGroupPropsData[] = [
        {
          display: getUserTypeValue() == "dh",
          name: "溯源农产品",
          value: e.categoryName,
          width: "40%",
        },
        {
          display: getUserTypeValue() == "dh",
          name: "状态",
          value: e.statusName,
          width: "40%",
        },
        {
          display: getUserTypeValue() !== "dh",
          name: "状态",
          value: e.statusName,
        },
      ].filter((e: any) => e.display);
      return (
        <div class={"pb-10 mb-10 w-full"}>
          <RoundInfo
            src={getUserTypeValue() == "dh" ? e.logo : ""}
            title={
              getUserTypeValue() == "dh"
                ? e.applyName
                : `溯源农产品: ${e.categoryName}`
            }
            data={data}
          />
          <GreyBlock class="mt-[12px]">
            <RowView class="justify-between flex-1">
              <RowView>
                <TextView>{e.time}</TextView>
              </RowView>
              {getUserTypeValue() == "dh" && (
                <ButtonGroupView
                  data={buttons}
                  class={"flex !justify-end w-[130px] max-sm:w-[170px]"}
                />
              )}
              {getUserTypeValue() !== "dh" && (
                <RoundEdgeButtonGroup data={buttons2} />
              )}
            </RowView>
          </GreyBlock>
          <Divider />
        </div>
      );
    };
    const render2 = () => {
      return (
        <CardView>
          <FilterMenuSearch
            v-model={form}
            choose={menuList}
            searchKey="title"
          />
          <ListView
            {...getUserInfoUrl({
              dh: "/api/H5/gov/richTraceSourceApply/large/queryTask",
              xh: "/api/H5/gov/richTraceSourceApply/small/queryTask",
            })}
            type="page"
            renderItem={renderItem}
            class={"mt-[20px]"}
            params={form}
          />
        </CardView>
      );
    };
    return () => (
      <PageImgTitle
        title="溯源记录"
        bgColor={apiTool.getBackGroundColor()}
        childClass={"m-child-top-20 "}
      >
        {render2()}
      </PageImgTitle>
    );
  },
});
